<template>
  <a-drawer title='字典列表' :width='screenWidth' @close='onClose' :visible='visible' v-if='visible'>
    <a-card :bordered='false'>
      <!-- 抽屉内容的border -->
      <div
        :style="{
          padding:'10px',
          border: '1px solid #e9e9e9',
          background: '#fff',
        }"
      >
        <div class='table-page-search-wrapper'>
          <a-form layout='inline' :form='form' @keyup.enter.native='searchQuery'>
            <a-row :gutter='10'>
              <a-col :md='8' :sm='12'>
                <a-form-item label='名称'>
                  <a-input
                    style='width: 120px;'
                    placeholder='请输入名称'
                    v-model='queryParam.dictDataDesc'
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :md='9' :sm='24'>
                <a-form-item
                  label='状态'
                  style='width: 170px'
                  :labelCol='labelCol'
                  :wrapperCol='wrapperCol'
                >
                  <a-select placeholder='请选择' v-model='queryParam.status'>
                    <a-select-option value='1'>正常</a-select-option>
                    <a-select-option value='0'>禁用</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md='7' :sm='24'>
                <span style='float: left;' class='table-page-search-submitButtons'>
                  <a-button type='primary' @click='searchQuery'>搜索</a-button>
                  <a-button type='primary' @click='searchReset' style='margin-left: 8px'>重置</a-button>
                </span>
              </a-col>
            </a-row>
            <a-row>
              <a-col :md='2' :sm='24'>
                <a-button style='margin-bottom: 10px' type='primary' @click='handleAdd'>新增</a-button>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div>
          <a-table
            ref='table'
            class='Table'
            rowKey='id'
            size='middle'
            :columns='columns'
            :dataSource='dataSource'
            :pagination='false'
            :loading='loading'
            @change='handleTableChange'
          >
            <span slot='action' slot-scope='text, record'>
              <a @click='handleEdit(record)'>编辑</a>
              <a-divider type='vertical' />
              <a-popconfirm title='确定删除吗?' @confirm='() => handleDelete(record.id)'>
                <a>删除</a>
              </a-popconfirm>
            </span>
          </a-table>
        </div>
      </div>

      <dict-item-modal ref='modalForm' @ok='modalFormOk'></dict-item-modal>
      <!-- 字典数据 -->
    </a-card>
  </a-drawer>
</template>

<script>
import { pick } from 'lodash'
import { filterObj } from '@/utils/util'
import DictItemModal from '@page-modules/DictItemModal'
import { PageListMixin } from '@/mixins/PageListMixin'

export default {
  name: 'DictItemList',
  mixins: [PageListMixin],
  components: { DictItemModal },
  data() {
    return {
      columns: [
        {
          title: '排序',
          align: 'center',
          dataIndex: 'sortSn'
        },
        {
          title: '名称',
          align: 'center',
          dataIndex: 'dictDataDesc'
        },
        {
          title: '数据值',
          align: 'center',
          dataIndex: 'dictDataCode'
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remarks'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      queryParam: {
        dictCode: '',
        dictDesc: '',
        dictDataDesc: '',
        delFlag: '1',
        status: []
      },
      title: '操作',
      visible: false,
      screenWidth: 800,
      model: {},
      dictCode: '',
      status: 1,
      labelCol: {
        xs: { span: 5 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 12 },
        sm: { span: 12 }
      },
      form: this.$form.createForm(this),
      validatorRules: {
        dictDataDesc: { rules: [{ required: true, message: '' }] },
        dictDataCode: { rules: [{ required: true, message: '' }] }
      },
      url: {
        list: '/cnDictionaryController/getDictByCode',
        delete: '/cnDictionaryController/deleteByid',
        deleteBatch: '/sys/dictItem/deleteBatch'
      }
    }
  },
  created() {
    // 当页面初始化时,根据屏幕大小来给抽屉设置宽度
    this.resetScreenSize()
  },
  methods: {
    add(dictCode) {
      this.dictCode = dictCode
      this.edit({})
    },
    edit(record) {
      if (record.id) {
        this.dictCode = record.dictCode
      }
      this.queryParam = {}
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.model.dictCode = this.dictCode
      this.model.status = this.status
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, Object.keys(this.model)))
      })
      // 当其它模块调用该模块时,调用此方法加载字典数据
      this.loadData()
    },

    getQueryParams() {
      var param = Object.assign({}, this.queryParam)
      param.dictCode = this.dictCode
      // param.field = this.getQueryField();
      param.current = this.ipagination.current
      param.size = this.ipagination.pageSize
      if (this.superQueryParams) {
        param['superQueryParams'] = encodeURI(this.superQueryParams)
        param['superQueryMatchType'] = this.superQueryMatchType
      }
      return filterObj(param)
    },

    // 添加字典数据
    handleAdd() {
      this.$refs.modalForm.add(this.dictCode)
      this.$refs.modalForm.title = '新增'
    },
    showDrawer() {
      this.visible = true
    },
    onClose() {
      this.visible = false
      this.form.resetFields()
      this.dataSource = []
    },
    // 抽屉的宽度随着屏幕大小来改变
    resetScreenSize() {
      let screenWidth = document.body.clientWidth
      if (screenWidth < 600) {
        this.screenWidth = screenWidth
      } else {
        this.screenWidth = 800
      }
    }
  }
}
</script>
<style scoped>
</style>
